<template>
	<view class="home">
		<!-- 头部搜索栏 -->
		<view class="nav">
			<input type="text" value="" class="input" />
			 <view class="icon-small-wrp">
			      <icon class="icon-small" type="search" size="14"></icon>
				   <view class="icon-box-title">搜索</view>
			    </view>
		</view>
		<!-- 中间轮播图 -->
		<view class="lbt">
			<swiper indicator-dots autoplay interval="3000" >
				<swiper-item>
					<image src="../../static/u=3014225274,3561789433&fm=26&gp=0.jpg" class="lbtimg" mode=""></image>
				</swiper-item>
				<swiper-item>
					<image src="../../static/u=4109983476,297199502&fm=26&gp=0.jpg" class="lbtimg" mode=""></image>
				</swiper-item>
				<swiper-item>
					<image src="../../static/u=4160120374,748155838&fm=26&gp=0.jpg" class="lbtimg" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 分类 -->
		<view class="classify">
			 <view class="c1">
				<image src="../../static/category.png" mode="" class="c1"></image>
			</view>
			<view class="c2">
				<image src="../../static/second.png" mode="" class="c2"></image>
			</view>
			<view class="c3">
				<image src="../../static/supermarket.png" mode="" class="c3"></image>
			</view>
			<view class="c4">
				<image src="../../static/baby.png" mode="" class="c4"></image>
			</view>
		</view>
		<!-- 时尚女装 -->
		<view class="fashion">
			<image src="../../static/titleImage.png" mode="" class="fashionImg"></image>
		</view>
		<!-- 优质服饰 -->
		<view class="costume">
			<view class="left">
				<image src="../../static/O1CN01FN3Pf724eZr3CJkVa_!!0-saturn_solar.jpg_468x468q75.jpg_.webp" mode="" class="left1"></image>
			</view>
			<view class="top1">
				<image src="../../static/O1CN01Inu2uB24rOxcmNH1G_!!0-saturn_solar.jpg_468x468q75.jpg_.webp" mode="" class="top1-1"></image>
			</view>
			<view class="top2">
				<image src="../../static/O1CN01NDBgo31Emx6HAnURz_!!0-saturn_solar.jpg_468x468q75.jpg_.webp" mode="" class="top1-2"></image>
			</view>
			<view class="button1">
				<image src="../../static/O1CN01ggKaYd2HF0k60m8I9_!!0-saturn_solar.jpg_468x468q75.jpg_.webp" mode="" class="button1-1"></image>
			</view>
			<view class="button2">
				<image src="../../static/O1CN01hKczrx1CavSLN3qak_!!0-saturn_solar.jpg_468x468q75.jpg_.webp" mode="" class="button2-2"></image>
			</view>
		</view>
		
		<!-- 时尚女装2 -->
		<view class="fashion">
			<image src="../../static/titleImage.png" mode="" class="fashionImg"></image>
		</view>
		<!-- 优质服饰2 -->
		<view class="costume">
			<view class="left">
				<image src="../../static/O1CN01FN3Pf724eZr3CJkVa_!!0-saturn_solar.jpg_468x468q75.jpg_.webp" mode="" class="left1"></image>
			</view>
			<view class="top1">
				<image src="../../static/O1CN01Inu2uB24rOxcmNH1G_!!0-saturn_solar.jpg_468x468q75.jpg_.webp" mode="" class="top1-1"></image>
			</view>
			<view class="top2">
				<image src="../../static/O1CN01NDBgo31Emx6HAnURz_!!0-saturn_solar.jpg_468x468q75.jpg_.webp" mode="" class="top1-2"></image>
			</view>
			<view class="button1">
				<image src="../../static/O1CN01ggKaYd2HF0k60m8I9_!!0-saturn_solar.jpg_468x468q75.jpg_.webp" mode="" class="button1-1"></image>
			</view>
			<view class="button2">
				<image src="../../static/O1CN01hKczrx1CavSLN3qak_!!0-saturn_solar.jpg_468x468q75.jpg_.webp" mode="" class="button2-2"></image>
			</view>
		</view>
		
		<!-- 时尚女装3 -->
		<view class="fashion">
			<image src="../../static/titleImage.png" mode="" class="fashionImg"></image>
		</view>
		<!-- 优质服饰3 -->
		<view class="costume">
			<view class="left">
				<image src="../../static/O1CN01FN3Pf724eZr3CJkVa_!!0-saturn_solar.jpg_468x468q75.jpg_.webp" mode="" class="left1"></image>
			</view>
			<view class="top1">
				<image src="../../static/O1CN01Inu2uB24rOxcmNH1G_!!0-saturn_solar.jpg_468x468q75.jpg_.webp" mode="" class="top1-1"></image>
			</view>
			<view class="top2">
				<image src="../../static/O1CN01NDBgo31Emx6HAnURz_!!0-saturn_solar.jpg_468x468q75.jpg_.webp" mode="" class="top1-2"></image>
			</view>
			<view class="button1">
				<image src="../../static/O1CN01ggKaYd2HF0k60m8I9_!!0-saturn_solar.jpg_468x468q75.jpg_.webp" mode="" class="button1-1"></image>
			</view>
			<view class="button2">
				<image src="../../static/O1CN01hKczrx1CavSLN3qak_!!0-saturn_solar.jpg_468x468q75.jpg_.webp" mode="" class="button2-2"></image>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="less">
	.home{
		.nav{
			height: 100rpx;
			background-color: #ff2d4a;
			position: relative;
			.input{
				width: 90%;
				background-color: #ffffff;
				position: absolute;
				top: 10rpx;
				left: 40rpx;
				height: 60rpx;
				padding-top: 20rpx;
				border-radius: 10rpx;
			}
			.icon-small-wrp{
				position: relative;
				.icon-small{
					position: absolute;
					top: 35rpx;
					left: 340rpx;
					font-size: 30rpx;
				}
				.icon-box-title{
					position: absolute;
					top: 35rpx;
					color: #c2c2c2;
					left: 380rpx;
					font-size: 26rpx;
					
				}
			}
		}
		.lbt{
			swiper{
				height: 350rpx;
			}
			.lbtimg{
				width: 100%;
			}
		}
		.classify{
			display: flex;
			width: 100%;
			height: 190rpx;
			.c1{
				width: 140rpx;
				height: 140rpx;
				padding-top: 15rpx;
				padding-left: 10rpx;
			}
			.c2{
				width: 140rpx;
				height: 140rpx;
				padding-top: 15rpx;
				padding-left: 30rpx;
			}
			.c3{
				width: 140rpx;
				height: 140rpx;
				padding-top: 15rpx;
				padding-left: 45rpx;
			}
			.c4{
				width: 140rpx;
				height: 140rpx;
				padding-top: 15rpx;
				padding-left: 40rpx;
			}
		}
		.fashion{
			margin-top: 30rpx;
			width: 100%;
			.fashionImg{
				width: 100%;
				height: 100rpx;
			}
		}
		.costume{
			margin-left: 17rpx;
			margin-top: 10rpx;
			width: 100%;
			height: 500rpx;
			background-color: #ffffff;
			position: relative;
			.left{
				height: 500rpx;
				width: 250rpx;
				background-color: pink;
				.left1{
					width: 100%;
					height: 100%;
				}
			}
			.top1{
				height: 240rpx;
				width: 230rpx;
				background-color: #d16f9e;
				position: absolute;
				top: 0;
				left: 265rpx;
				.top1-1{
					width: 100%;
					height: 100%;
				}
			}
			.top2{
				height: 240rpx;
				width: 230rpx;
				background-color: #d16f9e;
				position: absolute;
				top: 0;
				left: 510rpx;
				.top1-2{
					width: 100%;
					height: 100%;
				}
			}
			.button1{
				height: 240rpx;
				width: 230rpx;
				background-color: #d16f9e;
				position: absolute;
				top: 260rpx;
				left: 265rpx;
				.button1-1{
					width: 100%;
					height: 100%;
				}
			}
			.button2{
				height: 240rpx;
				width: 230rpx;
				background-color: #d16f9e;
				position: absolute;
				top: 260rpx;
				left: 510rpx;
				.button2-2{
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>
